import React, { useState, useEffect } from "react";
import { getPopularDataApi } from "@/utils/api";
import BetterScroll from "better-scroll";
import "./movieslist.scss";
export default function Movieslist() {
  const [ratedList, setRatedList] = useState([]);
  // 数据请求
  useEffect(() => {
    const fetchData = async () => {
      const result = await getPopularDataApi();
      setRatedList(result.result);
    };
    fetchData();
  }, []);
  // 滑动
  useEffect(() => {
    new BetterScroll(".warpper-list-parent", {
      scrollX: true,
      scrollY: false,
      click: true,
    });
  }, [ratedList]);
  return (
    <div className="popularlist">
      <p>最受欢迎的电影</p>
      <div className="warpper-list-parent">
        <ul className="warpper-list-child">
          {ratedList.map((item, index) => {
            return (
              <li key={index}>
                <img src={item.imgUrl} alt="" />
                {item.score ? (
                  <span>观众评分 {item.score}</span>
                ) : (
                  <span>{item.wishNum}人想看</span>
                )}
                <p>{item.title}</p>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}
